import React from 'react';
import logo from './logo.svg';
import './App.css';
import NameCard from './components/NameCard';
import LikesButton from './components/LikesButton';
import DigitalClock from './components/DigitalClock';
import CommentBox from './components/CommentBox';
import CommentList from './components/CommentList'
import ThemeContext from './theme-context'
import ThemeBar from './components/ThemeBar'
const theme = {
  light: {
    className: 'btn btn-primary',
    bgcolor: '#eee',
    color: '#000'

  },
  dark: {
    className: 'btn btn-light',
    bgcolor: '#222',
    color: '#fff'
  }
}

const tags = ['kontyo', 'cin'];
class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      comments: ['this is my comments'],
      theme: "light"
    }
    this.addComment = this.addComment.bind(this)
    this.changeTheme = this.changeTheme.bind(this)
  }
  addComment (comment) {
    this.setState({
      comments: [...this.state.comments, comment]
    })

  }
  changeTheme (theme) {
    this.setState({
      theme
    })

  }
  render () {
    const { comments } = this.state
    return (
      // <div className="App" >
      //   <header className="App-header">
      //     <img src={logo} className="App-logo" alt="logo" />
      //     <p>
      //       Edit <code>src/App.js</code> and save to reload.
      //   </p>
      //     <a
      //       className="App-link"
      //       href="https://reactjs.org"
      //       target="_blank"
      //       rel="noopener noreferrer"
      //     >
      //       Learn React
      //   </a>
      //   </header>
      // </div >

      <ThemeContext.Provider value={theme[this.state.theme]}>
        <div>
          <a href="#theme-switcher"
            className="btn btn-light"
            onClick={() => { this.changeTheme('light') }}
          >
            浅色主题
      </a>
          <a href="#theme-switcher"
            className="btn btn-secondary"
            onClick={() => { this.changeTheme('dark') }}
          >
            深色主题
      </a>
          <ThemeBar />
        </div>


      </ThemeContext.Provider>





      // 留言框
      // <div>
      //   <CommentList comments={comments} />
      //   <CommentBox
      //     commentsLength={comments.length}
      //     onAddComment={this.addComment}
      //   />

      // </div>

    )

  }
}


//     {/* <NameCard name="light" number={11139093} isHuman tags={tags}></NameCard> */ }
{/* <CommentBox /> */ }
//     {/* <LikesButton/>
//     <DigitalClock/> */}


//   }


// }

export default App;
